<template>
	<view class="container">
		<!--header-->
		<view class="productList-wrap">
		<!-- 产品列表 -->
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			@down="downCallback"
			:up="upOption" 
			@up="getProductList"
			:fixed="true"
		>
			<view class="content" v-for="(item,index) in safeStockList" :key='index'>
				<view class="goodsStockName">
					<view class="goodsStockNameLeft">
						<view class="goodsNameEllipsis">
							{{item.goodsName}}
						</view>
						<view class="">
							{{goodsMatcode}}
						</view>
						<!-- {{item.goodsName}}<span style='margin-left: 20rpx;'>{{item.goodsMatcode}}</span> -->
					</view>
					<view class="goodsStockNameRight">
						{{stockGoodsOutData[item.stockGoodsOutType]}}
					</view>
				</view>
				<view class="goodsStockInfo">
					<view class="goodsStockInfoLeft">
						产品码
					</view>
					<view class="goodsStockInfoRight">
						{{item.goodsUniqueCode.substring(0, 16)}}
					</view>
				</view>
				<view class="goodsStockInfo">
					<view class="goodsStockInfoLeft">
						日期
					</view>
					<view class="goodsStockInfoRight">
						{{item.createTime}}
					</view>
				</view>
			</view>
		</mescroll-body>
		</view>
		<!-- <loading></loading> -->
		<tui-modal></tui-modal>
	</view>
</template>

<script>
	import mixin from "@/utils/mixin.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins:[mixin,MescrollMixin],
		
		data() {
			return {
				searchKey: "", //搜索关键词
				safeStockList:[],
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 10 // 每页数据的数量
					},
					noMoreSize:10 //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
				beginDate:'',
				endDate:'',
				popupShow:false,
				safeStockNum:0,
				count:0,
				stockGoodsOutData:['','销售出库','线下出库','返厂出库','过期出库'],
				goodsName:'',
				goodsId:'',
				goodsMatcode:''
			}
		},
		onLoad(options) {
			// #ifdef H5
			   this.$wechat.noShare();
			// #endif
			if(options){
				this.goodsId=options.goodsId
				this.goodsMatcode=options.goodsMatcode
				this.type=options.type
			}
		},
		methods: {
			determine(data){
				this.beginDate=data[0]
				this.endDate=data[1]
				this.popupShow=false
				console.log(data)
				console.log(this.beginDate)
				console.log(this.endDate)
			},
			showFun(){
				this.popupShow=true
				console.log(this.popupShow)
			},
			colosePopup(){
				this.popupShow=false
			},
			//商品列表
			getProductList(page) {
				let params={
					current:page.num,
					pageSize:page.size,
					goodsId:this.goodsId,
					goodsMatcode:this.goodsMatcode
				};
				this.$http.outRecordDetail(params).then((res) => {
					if (res.status === 0) {
						// this.safeStockNum=res.data.safeStockNum
						// this.count=res.data.count
						// this.goodsName=res.data.goodsName
						// this.goodsId=res.data.goodsId
						let curPageData =res.data.records;
						this.mescroll.endSuccess(res.data.records.length);
						if (page.num == 1) {
							this.safeStockList = []
						};
						this.safeStockList = this.safeStockList.concat(curPageData);
						console.log(this.safeStockList)
					}
				}).catch(() => {
					this.mescroll.endErr()
				});
			},
			
			recordsIcon(){
				this.recordsList=[]
			},
			//搜索框输入
			searchKeyFun(){
				this.searchKey=''
			},
			goDetail(){
				uni.navigateTo({
					url:'../goodsStockDetail/goodsStockDetail'
				})
			},
		},
	}
</script>

<style lang="scss">
	.container {
		background: #fff;
		min-height: 100vh;
	}
	
	.historicRecords,.changeSearch{
		// margin-top: 60rpx;
		// padding: 60rpx 40rpx 80rpx 40rpx;
		background-color: #FFFFFF;
		color: #333333;
		// border-radius:0 0 50rpx 50rpx;
	}
	.changeSearch{
		padding: 20rpx 40rpx;
	}
	.changeW{
		font-size: 28rpx;
		border-bottom: 1rpx solid $borderColor;
		padding: 20rpx 10rpx;
	}
	/* 隐藏scroll-view滚动条*/
	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}
	.warehousingNumber{
		height: 250rpx;
		width: 100%;
		background: #fff;
		position: fixed;
		z-index: 99998;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		.stockLess{
			background-image: url(../../static/img/backGrount.png);
			background-size: 100% 100%;
			width: 50%;
			height: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			.bianjiBox{
				margin-left: 30rpx;
				.iconfont{
					color:  #EA655E;
					font-size: 40rpx;
				}
			}
			.stockLeft{
				color: #999;
			}
			.stockRight{
				color:  #EA655E;
				margin-top: 30rpx;
			}
		}
		
	}
	.content{
		background-color: #fff;
		border-top: 20rpx solid #f7f7f7;
	}
	.goodsStockName{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.goodsStockNameLeft{
			font-size: 28rpx;
			// font-weight: 600;
			color: #111111;
			.goodsNameEllipsis{
				width: 500rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.goodsStockNameRight{
			font-size: 28rpx;
			font-weight: 400;
			color: #EA655E;
		}
	}
	.goodsStockInfo{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.goodsStockInfoLeft{
			font-size: 28rpx;
			color: #999999;
		}
		.goodsStockInfoRight{
			font-size: 28rpx;
			color: #111111;
			
			.redColor{
				color: #EA655E;
			}
		}
	}
</style>
